<template>
  <div>
    <div class="box1">
      <slot :user="user"></slot>
    </div>
    <div class="box2">
      <slot :user="user2" name="person"></slot>
    </div>
  </div>
</template>

<!-- <script>
export default {
  name: 'child3',
  data() {
    return {
      user: {
        name: '张三',
        age: 30
      },
      user2: {
        name: '李四',
        age: 31
      }
    }
  }
}
</script> -->

<script setup>
import { ref } from 'vue'
defineOptions({
  name: 'child3'
})
const user = ref({
  name: '张三',
  age: 30
})
const user2 = ref({
  name: '李四',
  age: 31
})
</script>

<style lang="scss" scoped>
.box1 {
  color: red;
}
.box2 {
  color: blue;
}
</style>
